<!-- 属性表单 -->

<template>
  <WebForm :path="path" word5>
    <FormInput label="属性标识" bind="propertyCode" onlyAdd required />

    <FormInput label="属性名称" bind="propertyName" required />

    <FormInput label="属性单位" bind="unit" />

    <EasyRow col2>
      <FormSelect
        label="数据类型"
        bind="dataType"
        :dict="CORE.DICT.DATA_TYPE"
        initFirst
        required
        @change="changeType"
      />
      <FormRadio label="读写类型" bind="operateType" :dict="CORE.DICT.READONLY" initFirst required />
    </EasyRow>

    <component :is="componentName" />

    <FormTextarea label="属性备注" bind="description" />
  </WebForm>
</template>

<script>
// ============================== 导入依赖 ============================== //

import CORE from '@/CORE'
import props from './props'

// ============================== 导出组件 ============================== //

export default {
  /**
   * 名称定义 (实际使用名称)
   */
  name: 'PropForm',

  /**
   * 组件导入 (Abc.vue + Abc/index.vue)
   */
  ...CORE.components(require.context('./', true, /vue$/)),

  /**
   * 属性注册 (抽取以便查阅)
   */
  props,

  /**
   * 计算属性 (慎用箭头函数)
   */
  computed: {
    /**
     * 模块路径的状态集
     */
    state() {
      const pathList = this.path ? this.path.split('/') : []
      let state = this.$store.state
      for (const path of pathList) {
        state = state[path]
      }
      return state
    },

    /**
     * 模块路径的单项对象
     */
    one() {
      return this.state.one
    },

    /**
     * 组件名称
     */
    componentName() {
      const dataType = this.one.dataType || CORE.DICT.DATA_TYPE[0][0]
      return CORE.keyPre(dataType, 'My')
    },
  },

  /**
   * 本地方法 (轻量重要在前)
   */
  methods: {
    /**
     * 切换类型
     */
    changeType(type) {
      const { one } = this
      if (['radio', 'checkbox'].includes(type)) {
        one.optionList = [{ label: '123', value: '' }]
      } else {
        one.optionList = []
      }
      one.setting = {}
    },
  },
}
</script>
